<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0 ,minimum-scale=1.0 ,user-scalable=no"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>首页</title>
    <link rel="stylesheet" href="../css/reset.css"/>
    <link rel="stylesheet" href="../css/common.css"/>
    <link rel="stylesheet" href="../css/footer.css"/>
    <link rel="stylesheet" href="../css/iconfont.css"/>
    <script src="../js/jquery-1.8.3.min.js"></script>
    <style>
        .header1 .right{position: relative;}
        .header1 .right .dot{position: absolute;right: 10px;top: 10px;width: 8px;height: 8px;background-color: red;border-radius: 8px;}

        .tip-title{line-height: 35px;position: relative;overflow: hidden;padding: 0 10px 0 5px;color: #999;font-size: 14px;}
        .tip-title b{color: #333;}
        .tip-title a{float: right;color: #999;}

        .top-nav{padding: 10px;}
        .top-nav ul{overflow: hidden;}
        .top-nav ul li{float: left;width: 25%;padding: 5px 0;}
        .top-nav ul li a{}
        .top-nav ul li a div{width: 55px;height: 55px;border-radius: 50%;margin: 0 auto;}
        .top-nav ul li a p{text-align: center;margin-top: 8px;font-size: 12px;color: #333;}
        .top-nav ul li:nth-child(1) a div{background-color: #ff6e57;}
        .top-nav ul li:nth-child(2) a div{background-color: #f373ac;}
        .top-nav ul li:nth-child(3) a div{background-color: #877cfe;}
        .top-nav ul li:nth-child(4) a div{background-color: #30b2fd;}
        .top-nav ul li:nth-child(5) a div{background-color: #fe980f;}
        .top-nav ul li:nth-child(6) a div{background-color: #30b2fd;}
        .top-nav ul li:nth-child(7) a div{background-color: #ff6e57;}
        .top-nav ul li:nth-child(8) a div{background-color: #877cfe;}

        .mid-info{overflow: hidden;padding: 5px;border-top: 5px solid #eeedf3;border-bottom: 5px solid #eeedf3;}
        .mid-info .left{float: left;width: 50%;padding:0 5px;}
        .mid-info .left .title{font-weight: bold;margin-bottom: 10px;font-size: 14px;}
        .mid-info .left ul{overflow: hidden;}
        .mid-info .left ul li{float: left;width: 33.3333%;}
        .mid-info .left ul li img{width: 80%;display: block;margin: 0 auto;}
        .mid-info .left ul li p{text-align: center;margin-top: 5px;font-size: 12px;}
        .mid-info .right{float: right;width: 50%;padding-left: 5px;border-left: 1px solid #ececec;}
        .mid-info .right a{display: block;height: 90px;background-image: url("../img/pic_activity.png");
            background-size: cover;background-position: center;}

        .introduce{}
        .introduce ul{overflow: hidden;padding:3% 2%;}
        .introduce ul li{float: left;width: 33.3333%;padding: 0 2%;margin-bottom: 15px;}
        .introduce ul li img{width: 100%;border-radius: 50%;}
        .introduce ul li div{overflow: hidden;font-size: 12px;text-align: center;}
        .introduce ul li div p{float: left;color: #333;}
        .introduce ul li div p i{color: #d66792;}
        .introduce ul li div span{float: right;color: #ffc10c;}
        .introduce ul li h3{color: #333;font-weight: normal;font-size: 12px;text-align: center;}
    </style>
</head>
<body>
<script src="../js/overall_mask.js"></script>
    <header class="header header1">
        <div class="header-fixed">
            <div class="left">
                <span>金华</span><i class="iconfont icon-arrowdown"></i>
            </div>
            <div class="center">
                <a class="search" href="../html/search.html">
                    <i class="iconfont icon-search"></i>
                    <span>请输入关键字</span>
                </a>
            </div>
            <div class="right">
                <a href="../html/message.html"><i class="iconfont icon-message"></i></a>
                <span class="dot"></span>
            </div>
        </div>
    </header>
    <div class="content">
        <div class="tip-title bottom-line">
            <span>为你推荐热门类别</span>
            <a href="../html/class_list.html">更多<i class="iconfont icon-arrow_right"></i></a>
        </div>
        <div class="top-nav">
            <ul>
                <li>
                    <a href="../html/category_list.html">
                        <div></div>
                        <p>模特</p>
                    </a>
                </li>
                <li>
                    <a href="../html/category_list.html">
                        <div></div>
                        <p>丽人</p>
                    </a>
                </li>
                <li>
                    <a href="../html/category_list.html">
                        <div></div>
                        <p>摄影</p>
                    </a>
                </li>
                <li>
                    <a href="../html/category_list.html">
                        <div></div>
                        <p>设计</p>
                    </a>
                </li>
                <li>
                    <a href="../html/category_list.html">
                        <div></div>
                        <p>生活服务</p>
                    </a>
                </li>
                <li>
                    <a href="../html/category_list.html">
                        <div></div>
                        <p>语言练习</p>
                    </a>
                </li>
                <li>
                    <a href="../html/category_list.html">
                        <div></div>
                        <p>专业咨询</p>
                    </a>
                </li>
                <li>
                    <a href="../html/category_list.html">
                        <div></div>
                        <p>影视表演</p>
                    </a>
                </li>
            </ul>
        </div>
        <div class="mid-info">
            <div class="left">
                <p class="title">热门雇主 <a href="../html/rent_list.html" style="color: #999;font-size: 14px;font-weight: normal;float: right;">更多<i class="iconfont icon-arrow_right"></i></a></p>
                <ul>
                    <li>
                        <a href="../html/other_home2.html">
                            <img src="../img/pic_lessor.png" alt=""/>
                            <p>小明</p>
                        </a>
                    </li>
                    <li>
                        <a href="../html/other_home2.html">
                            <img src="../img/pic_lessor.png" alt=""/>
                            <p>小明</p>
                        </a>
                    </li>
                    <li>
                        <a href="../html/other_home2.html">
                            <img src="../img/pic_lessor.png" alt=""/>
                            <p>小明</p>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="right">
                <a href="../html/show.html"></a>
            </div>
        </div>
        <div class="tip-title bottom-line">
            <b>出租人（推荐）</b>
            <a href="../html/category_list.html">更多<i class="iconfont icon-arrow_right"></i></a>
        </div>
        <div class="introduce">
            <ul>
                <li>
                    <a href="../html/other_home3.html">
                        <img src="../img/pic_lessor.png" alt=""/>
                        <div>
                            <p>小艾<i class="iconfont icon-women"></i></p>
                            <span>200元/天</span>
                        </div>
                        <h3>模特、演出</h3>
                    </a>
                </li>
                <li>
                    <a href="../html/other_home3.html">
                        <img src="../img/pic_lessor.png" alt=""/>
                        <div>
                            <p>小艾<i class="iconfont icon-women"></i></p>
                            <span>200元/天</span>
                        </div>
                        <h3>模特、演出</h3>
                    </a>
                </li>
                <li>
                    <a href="../html/other_home3.html">
                        <img src="../img/pic_lessor.png" alt=""/>
                        <div>
                            <p>小艾<i class="iconfont icon-women"></i></p>
                            <span>200元/天</span>
                        </div>
                        <h3>模特、演出</h3>
                    </a>
                </li>
                <li>
                    <a href="../html/other_home3.html">
                        <img src="../img/pic_lessor.png" alt=""/>
                        <div>
                            <p>小艾<i class="iconfont icon-women"></i></p>
                            <span>200元/天</span>
                        </div>
                        <h3>模特、演出</h3>
                    </a>
                </li>
                <li>
                    <a href="../html/other_home3.html">
                        <img src="../img/pic_lessor.png" alt=""/>
                        <div>
                            <p>小艾<i class="iconfont icon-women"></i></p>
                            <span>200元/天</span>
                        </div>
                        <h3>模特、演出</h3>
                    </a>
                </li>
                <li>
                    <a href="../html/other_home3.html">
                        <img src="../img/pic_lessor.png" alt=""/>
                        <div>
                            <p>小艾<i class="iconfont icon-women"></i></p>
                            <span>200元/天</span>
                        </div>
                        <h3>模特、演出</h3>
                    </a>
                </li>

            </ul>
        </div>
    </div>
    <footer class="footer">
        <div class="footer-fixed">
            <div class="foot-bar">
                <a href="javascript:void(0);" class="active">
                    <div>
                        <i class="iconfont icon-home"></i>
                    </div>
                    <p>首页</p>
                </a>
                <a href="../html/task.html">
                    <div>
                        <i class="iconfont icon-renwu"></i>
                    </div>
                    <p>任务</p>
                </a>
                <a href="javascript:void(0);" class="center">
                    <div>
                        <div class="plus">
                            <i class="iconfont icon-plus"></i>
                        </div>
                    </div>
                    <p>发布</p>
                </a>
                <a href="../html/show.html">
                    <div>
                        <i class="iconfont icon-faxian-copy-copy"></i>
                    </div>
                    <p>发现</p>
                </a>
                <a href="../html/center.html">
                    <div>
                        <i class="iconfont icon-user"></i>
                    </div>
                    <p>我</p>
                </a>
            </div>
            <div class="two-btn">
                <a href="../html/publish_want.html">雇主发布</a>
                <a href="../html/add_service.html">出租人发布</a>
            </div>
        </div>
    </footer>
</body>
    <script>
        $('.center .plus').click(function(){
            $('.two-btn').slideToggle();
            if($(this).hasClass('plus-active')){
                $(this).removeClass('plus-active');
                $(this).css({'transform':'rotate(0deg)','-webkit-transform':'rotate(0deg)'});
                $('.content').removeClass('filter');
            }else{
                $(this).addClass('plus-active');
                $(this).css({'transform':'rotate(45deg)','-webkit-transform':'rotate(45deg)'});
                $('.content').addClass('filter');
            }
        })
    </script>
</html>